<template>
  <!-- 评论具体内容 -->
  <div class="commentContent">
    <div class="commentContentInfo">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
      <span class="username">{{ comment.userEntity.username }}</span>
      <span class="time">{{ comment.commentEntity.gmtCreated }}</span>
      <span class="callback" @click="callback">回复</span>
    </div>

    <div class="commentContentItemCon">
      {{ comment.commentEntity.commentContent }}
    </div>

    <div
      class="seeMoreCallBackStyle"
      v-if="isShow"
      @click="seeMoreCallBack(comment.commentEntity.id)"
    >
      ———— 查看更多回复 ————
    </div>

    <div style="margin-left: 40px;" v-if="moreShow">
      <CallBackItemMobel
        v-for="(item, index) in sonComment"
        :key="index"
        :comment="item"
      ></CallBackItemMobel>
    </div>

    <div class="commentBox" v-if="isChecked">
      <el-input type="textarea" placeholder="请输入内容"></el-input>
      <div class="btn">
        <el-button type="primary" size="mini" @click="sendComment"
          >发表</el-button
        >
        <el-button size="mini" @click="cancelComment">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ReqCommentCallBackById } from "../request/index.js";
import CallBackItemMobel from "./CallBackItemMobel.vue";
export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isShow: true,
      // 查看更多
      moreShow: false,
      isChecked: false,
      sonComment: [],
    };
  },
  components: {
    CallBackItemMobel,
  },
  methods: {
    async seeMoreCallBack(id) {
      if (!this.moreShow) {
        this.moreShow = true;
        this.isShow = false;
      }
      const data = await this.getSonComment(id);
      if (data) {
        data.forEach(async (item) => {
          this.sonComment.push(item);
          await this.seeMoreCallBack(item.commentEntity.id);
        });
      }
      console.log(this.sonComment);
    },
    // 获取子节点
    async getSonComment(id) {
      const resultData = await ReqCommentCallBackById({ commentId: id });
      const { remarks } = resultData;
      if (remarks.length !== 0) {
        return remarks;
      } else {
        return null;
      }
    },
    // 评论
    sendComment() {},
    // 取消评论
    cancelComment() {
      this.isChecked = false;
      if (this.moreShow) {
        this.isShow = false;
      }else {
        this.isShow = true
      }
    },
    // 点击回复
    callback() {
      this.isChecked = true;
      this.isShow = false
    },
  },
  created() {
    // console.log(this.comment);
  },
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/reqDetailMobel.css");
.seeMoreCallBackStyle {
  font-size: 10px;
  color: #ccc;
  cursor: pointer;
  text-align: center;
  padding: 10px 0px;
}
</style>
